<template>
    <el-dialog :title="isEdit ? '修改员工' : '新增员工'" :visible.sync="localFormVisible" :before-close="closeDialog">
        <el-form :model="formData" :rules="rules" ref="formRef">
            <el-form-item v-if="isEdit" label="员工编号" :label-width="formLabelWidth" prop="empno">
                <el-input v-model="formData.empno" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="ename">
                <el-input v-model="formData.ename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" :label-width="formLabelWidth" prop="deptno">
                <el-select v-model="formData.deptno" >
                    <el-option v-for="dept in deptlist" :key="dept.deptno" :label="dept.dname" :value="dept.deptno"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                <el-radio v-model="formData.sex" label="男">男</el-radio>
                <el-radio v-model="formData.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="工作" :label-width="formLabelWidth" prop="job">
                <el-input v-model="formData.job" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工资" :label-width="formLabelWidth" prop="sal">
                <el-input v-model="formData.sal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职日期" :label-width="formLabelWidth" prop="hiredate">
                <!--                  format：日期框显示的格式，用户看到的格式-->
                <!--                  value-format：值的格式，获得的值的格式-->
                <el-date-picker
                        v-model="formData.hiredate"
                        type="date"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">关闭</el-button>
            <el-button type="primary" @click="saveForm">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "EmpForm",
    props: {
        isEdit: {
            type: Boolean,
            default: false,
        },
        formVisible: {
            type: Boolean,
            default: false,
        },
        formData: Object,
        deptlist: Array,
    },
    data() {
        return {
            localFormVisible: this.formVisible,
            rules: {
                ename: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' },
                    { min: 0, max: 20, message: '员工姓名输入过长', trigger: 'blur' }
                ],
                deptno: [
                    { required: true, message: '请选择所属部门', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                job: [
                    { required: true, message: '请输入工作', trigger: 'blur' },
                    { min: 0, max: 20, message: '工作输入过长', trigger: 'blur' }
                ],
                sal: [
                    { required: true, message: '请输入工资', trigger: 'blur' },
                ],
                hiredate: [
                    { required: true, message: '请选择入职日期', trigger: 'change' }
                ],

            },
            //表单元素宽度
            formLabelWidth: '120px',
        }
    },
    methods: {
        closeDialog() {
            //通知父组件修改formVisible的值为false
            this.$emit('update:formVisible', false)
        },
        saveForm() {
            this.$refs['formRef'].validate((valid) => {
                if (valid) {
                    //调用父组件的保存方法
                    this.$emit('submitForm', this.formData)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    watch: {
        formVisible(newVal) {
            this.localFormVisible = newVal; // 当 `prop` 改变时，更新本地变量
            if (newVal) {
                if(this.$refs['formRef']) {
                    this.$refs['formRef'].resetFields(); // 当弹框打开时重置表单
                }
            }
        }
    }

}
</script>

<style scoped>

</style>